<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/static/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
</head>
<body>
<#include "nav.ftl">

<div class="container mt-2">
    <table class="table table-bordered table-hover">
        <caption><h5>购物车</h5></caption>
        <theader>
        <tr><th>商品名称</th><th>单价（本）</th><th>数量</th>
            <th>金额</th>
            <th>常用操作</th></tr>
        </theader>
        <tbody>
        <#if map?? && (map?size>0)>
            <#assign count=0>
            <#list map?values as shop>
                <#assign count+=shop.num*shop.price>
                <tr>
                    <td>《${shop.name}》</td>
                    <td>${shop.price}</td>
                    <td><input type="button" value="-" ii="${shop.id}"><input style="text-align: center;" type="text" size="2" name="num" value="${shop.num}"><input ii="${shop.id}" type="button" value="+"></td>
                    <td>${shop.num * shop.price}元</td>
                    <td>
                        <a href="/shopbag?action=del&id=${shop.id}">删除</a>
                    </td>
                </tr>
            </#list>
            <tr><td colspan="100">共计：<span class="cc text-danger font-weight-bold">${count}</span> 元</td></tr>
        <#else>
            <tr><td colspan="100">没有数据</td></tr>
        </#if>
        </tbody>
    </table>
    <hr>
    <p>
        <a href="/shopbag?action=delall" class="btn btn-sm btn-danger">清空购物车</a>
        <a href="/index" class="btn btn-sm btn-primary">继续购物</a>
        <a href="/shopbag?action=ok" class="btn btn-sm btn-info">结算下单</a>
    </p>
</div>

<script src="/static/jquery/jquery.min.js"></script>
<script>
    $(function(){
        function hasDot(num){
            if(!isNaN(num)){
                return ( (num + '').indexOf('.') != -1 ) ? num.toFixed(2) : num;
            }
        }

        $('input[name=num]').next().click(function(){
            let p = $(this).prev();
            let n = Number(p.val());
            p.val(++n);
            up($(this).attr("ii"),n);
            let my = Number(p.val())*Number((p.parent().prev().html()));
            p.parent().next().html(hasDot(my) + "元");
            let rr = Number($('.cc').html()) + Number(hasDot(1*Number(p.parent().prev().html())));
            $('.cc').html(hasDot(rr));

        });
        $('input[name=num]').prev().click(function(){
            let p = $(this).next();
            let n = Number(p.val());
            if(n>1) {
                p.val(--n);
                let my = Number(p.val()) * Number((p.parent().prev().html()));
                p.parent().next().html(hasDot(my) + "元");
                let rr = Number($('.cc').html()) - Number(hasDot(1 * Number(p.parent().prev().html())));
                $('.cc').html(hasDot(rr));
                up($(this).attr("ii"),n);
            }
        });

        function up(ida,numa){
            $.ajax({
                type:'post',
                url:'/shopbag',
                data:{action:"update",id:ida,num:numa}
            })
        }
    })
</script>


</body>
</html>